<template>
  <div>
    <!-- 第一行，按钮，搜索框下拉框 -->
    <div>
      <div class="search">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item>
            <el-button type="primary" @click="toadd">录入</el-button>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.name" clearable placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.status" clearable placeholder="请选择状态">
              <el-option label="正常" value="正常"></el-option>
              <el-option label="下架" value="下架"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- {{ columnData }} -->
            <el-select v-model="form.productCategoryId" clearable placeholder="请选择栏目">
              <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id"></el-option>
              <!-- <el-option label="下架" value="下架"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="tosearch">查询</el-button>
            <el-button type="primary" @click="toto">测试</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 第二行  表格 -->
    <div>
      <el-table :data="productData" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号"></el-table-column>
        <el-table-column prop="id" label="产品编号" align:center></el-table-column>
        <el-table-column prop="name" label="名称" align:center></el-table-column>
        <el-table-column prop="photo" label="图片" align:center>
          <template v-slot="scope">
            <img width="30px" :src="scope.row.photo" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" align:center></el-table-column>
        <el-table-column prop="status" label="状态" align:center>
          <template v-slot="scope">
            <!-- <el-tag type="success" v-if="scope.row.status == '正常'">正常</el-tag>
            <el-tag v-else type="danger">下架</el-tag> -->
            <el-tag :type="scope.row.status == '正常' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="category.name" label="所属栏目" align:center></el-table-column>
        <el-table-column prop="category.name" label="操作" align:center>
          <template v-slot="scope">
            {{ scope.row.id }}
            <el-link type="primary" style="margin-right: 10px;" @click="changeitem">修改</el-link>
            <el-link type="info" v-if="scope.row.status == '下架'" @click="change(scope.row.id, '上架')">上架</el-link>
            <el-link type="danger" v-else @click="change(scope.row.id, '下架')">下架</el-link>
          </template>
        </el-table-column>


      </el-table>
    </div>
    <!-- 第三行 分页按钮 -->
    <div class="page" style="text-align: center;margin-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 录入和修改的抽屉 -->
    <div>
      <el-drawer :title="title" :visible.sync="dialog" direction="rtl" custom-class="demo-drawer" ref="drawer" size="40%">
        <div class="demo-drawer__content" style="padding: 0 15px;">
          <el-form :model="formsave">
            <el-form-item class='input' label="产品名称" :label-width="formLabelWidth">
              <el-input v-model="formsave.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品分类" :label-width="formLabelWidth">
              <el-select v-model="formsave.productCategoryId" placeholder="请选择产品分类" clearable>
                <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>

            </el-form-item>
            <el-form-item class='input' label="产品价格" :label-width="formLabelWidth">
              <el-input v-model="formsave.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品封面" :label-width="formLabelWidth">
              <el-upload class="avatar-uploader" action="http://121.4.83.32:7006/UploadControlle/upload"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="产品描述" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="form.description"></el-input>
            </el-form-item>

          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="dialog = false">取 消</el-button>
            <el-button type="primary" @click="dialog = false">确定</el-button>
          </div>
        </div>
      </el-drawer>

    </div>
  </div>
</template>

<script>
import { get } from '@/utils/request.js'
import { pageQuery, pageQueryPro, online, offline } from '@/api/product.js'
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      // 表单对象
      form: {
        user: '',
        region: ''
      },
      productData: [],
      params: {
        page: 1,
        pageSize: 10
      },
      // index:
      // 产品的数量
      total: 0,
      currentPage4: 1,
      title: '修改产品信息',
      dialog: false,
      formsave: {},
      formLabelWidth: '120px',
      imageUrl: ''
    }

  },
  computed: {
    ...mapState('column', ['columnData'])
  },
  watch: {
    params: {
      handler() {
        this.getProduct()
      },
      deep: true
    }

  },
  methods: {
    // 上传成功的回调函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 上传之前的回调函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 打开抽屉 添加信息
    toadd() {
      this.dialog = true,
        this.title = '产品录入'
    },
    // 打开抽屉，修改信息
    changeitem() {
      this.dialog = true
    },
    toto() {
      alert('casada')
    },
    // 产品上架,下架
    change(id, status) {
      console.log(id, status);
      this.$confirm(`此操作会${status}此产品`, "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (status === '上架') {
            res = await online({ id: id })
          } else {
            res = await offline({ id: id })
          }
          this.$message({
            type: "success",
            message: `${status}成功`
          })
          // 重新载入产品数据
          this.getProduct()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: `已取消${status}操作`
          })
          this.getProduct()

        })
    },

    // 每页显示条数发生改变处罚方法
    handleCurrentChange(page) {
      this.params.page = page
    },
    // 页码发生改变处罚方法
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
    },
    // 分页多条件查询产品数据
    async getProduct() {
      let temp = {
        ...this.params,
        ...this.form
      }
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      let res = await pageQueryPro(temp);
      console.log(res);
      this.productData = res.data.list
      this.total = res.data.total

    },
    // 去查询
    tosearch() {
      // 从第一页开始查询
      this.params.page = 1
      this.getProduct()
    },

    ...mapActions('column', ['getColumnData']),
    // async getPro(){
    //   // let res = await get('/project/selectApply')
    //   // console.log(res);
    // },
    // 封装查询产品分类的代码
    async getColumn() {
      this.getColumnData({ page: 1, pageSize: 1000 })
    }


  },
  created() {
    // this.getPro()
    this.getColumn()
    this.getProduct()
  }
}
</script>
<style lang="scss" scoped>
// @import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
// :deep(.el-link){
//   font-size: 14px;
// }
// 深度监听器也解决不了就追加类名

.input {
  width: 400px !important;
}

.demo-drawer__footer {
  text-align: center;
  position: fixed;
  bottom: 20px;
  width: 40%;
}
</style>